<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var list = [
    {
      "id": 1,
      "goods_name": "班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣",
      "goods_img": "https://www.escook.cn/vuebase/pics/1.png",
      "goods_price": 108,
      "goods_count": 1,
      "goods_state": true,
      "pid": 0
    },
    {
      "id": 2,
      "goods_name": "嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮",
      "goods_img": "https://www.escook.cn/vuebase/pics/2.png",
      "goods_price": 129,
      "goods_count": 1,
      "goods_state": true,
      "pid": 0
    },
    {
      "id": 3,
      "goods_name": "思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套",
      "goods_img": "https://www.escook.cn/vuebase/pics/3.png",
      "goods_price": 198,
      "goods_count": 1,
      "goods_state": false,
      "pid": 0
    },
    {
      "id": 4,
      "goods_name": "思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套",
      "goods_img": "https://www.escook.cn/vuebase/pics/4.png",
      "goods_price": 99,
      "goods_count": 1,
      "goods_state": false,
      "pid": 3
    },
    {
      "id": 5,
      "goods_name": "幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮",
      "goods_img": "https://www.escook.cn/vuebase/pics/5.png",
      "goods_price": 156,
      "goods_count": 1,
      "goods_state": true,
      "pid": 2
    },
    {
      "id": 6,
      "goods_name": "ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女",
      "goods_img": "https://www.escook.cn/vuebase/pics/6.png",
      "goods_price": 142.8,
      "goods_count": 1,
      "goods_state": true,
      "pid": 3
    },
    {
      "id": 7,
      "goods_name": "幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套",
      "goods_img": "https://www.escook.cn/vuebase/pics/7.png",
      "goods_price": 219,
      "goods_count": 2,
      "goods_state": true,
      "pid": 2
    },
    {
      "id": 8,
      "goods_name": "依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套",
      "goods_img": "https://www.escook.cn/vuebase/pics/8.png",
      "goods_price": 178,
      "goods_count": 1,
      "goods_state": true,
      "pid": 7
    },
    {
      "id": 9,
      "goods_name": "芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬",
      "goods_img": "https://www.escook.cn/vuebase/pics/9.png",
      "goods_price": 128,
      "goods_count": 1,
      "goods_state": false,
      "pid": 1
    },
    {
      "id": 10,
      "goods_name": "Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫",
      "goods_img": "https://www.escook.cn/vuebase/pics/10.png",
      "goods_price": 153,
      "goods_count": 1,
      "goods_state": false,
      "pid": 9
    }
  ]
  // list.forEach(item => console.log(item));

  // 扁平数据化算法
  // function formtDataTree(data){
  //   let parents = data.filter( p => p.pid === 0),
  //       children = data.filter(c => c.pid !== 0);
  //   // console.log(parents, children);

  //   dataToTree(parents, children);

  //   console.log(parents);
  //   function dataToTree(parents, children){
  //     parents.map( p=> {
  //       children.map( c=> {
  //         if(c.pid === p.id){
  //           if(p.children){
  //             p.children.push(c);
  //           }else{
  //             p.children = [c];
  //           }
  //         }
  //       });
  //     })
  //   }
  // }
  

  /**
   * 改良版 实现嵌套版
   * */ 
  function formtDataTree(data){
    let parents = data.filter( p => p.pid === 0),
        children = data.filter(c => c.pid !== 0);
    // console.log(parents, children);

    dataToTree(parents, children);

    return parents;
    function dataToTree(parents, children){
      parents.map( p=> {
        children.map( (c, i)=> {
          if(c.pid === p.id){
            // 利用JSON数据转对象实现深拷贝
            let _chilren = JSON.parse(JSON.stringify(children));
            _chilren.splice(i, 1);
            dataToTree([c], _chilren)
            if(p.children){
              p.children.push(c);
            }else{
              p.children = [c];
            }
          }
        });
      })
    }
  }

  function formtDataTree(data){
    let _data = JSON.parse(JSON.stringify(data));
    return _data.filter(p => {
      const _arr = _data.filter( c => c.pid === p.id);
      _arr.length && (p.chdren = _arr);
      return p.pid === 0;
    })
  }

  console.log(formtDataTree(list));



  // Promise的使用
  const promise = new Promise( (resolve, reject) => {
    if(true){
      resolve("孩子他爹");
    }else{
      reject("老公");
    }
  })

  promise.then(name => {
    console.log(`男人成为了${name}`);
  }).catch(name => {
    console.log(`男人成为了${name}`);
  }).finally(() => {
    console.log(`男人和女人结婚了`);
  })
  </script>
</body>
</html>